{% extends 'base.html' %}
{% block title %}Nodes{% endblock %}
{% block nav-itemed-3 %}layui-nav-itemed{% endblock %}
{% block nav-itemed-3-1 %}layui-this{% endblock %}
{% block context %}
    <span class="layui-breadcrumb" lay-separator="-">
        <a href="{% url 'index' %}">首页</a>
        <a href="">Kubernetes</a>
        <a href="{% url 'nodes' %}">Nodes</a>
    </span>
    <hr class="layui-border-green">
    <hr>
<div class="layui-card">
    <div class="layui-card-header"><span style="color: #009f95;font-weight: bold">Nodes</span></div>
    <div class="layui-card-body">
        {% csrf_token %}
        <div class="layui-row">
            <div class="layui-col-md12">
                <!--  头部工具栏，左侧 -->
                <script type="text/html" id="toolBar">
                    <div class="layui-btn-container">
                        <input type="text" id="nodeName" lay-verify="title" placeholder="请输入名称" class="layui-input" style="width: 170px;height: 35px;font-size: 15px;color: black;float: left;background: white;margin-top: 7px">
                        <button class="layui-btn" id="searchBtn" style="float: left;margin-left: 5px;margin-top: 2px">搜索</button>
                    </div>
                </script>
            </div>
            <div class="layui-col-md12">
                    <table id="tt" lay-filter="tt"></table>
                    <!--  行工具 -->
                    <script type="text/html" id="bar">
                      <a class="layui-btn layui-btn-xs" lay-event="yaml">YAML</a>
                      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                      <a class="layui-btn layui-btn-warm layui-btn-xs layui-border-black" lay-event="details">详情</a>
                    </script>
            </div>
        </div>
    </div>
</div>
<hr>
{% endblock %}
{% block custom_js %}
<script>
layui.use('table', function(){
table = layui.table;
$ = layui.jquery;
table.render({
    elem: '#tt' // 选择table元素
    ,url: '{% url 'node_tabledata' %}' //数据接口
    ,toolbar: '#toolBar' //开启头部工具栏
    ,defaultToolbar: ['filter', 'exports', 'print']
    ,page: true //开启分页
    ,cols: [[ //表头
      {type: 'checkbox'}
      ,{field: 'name', title: '名称', sort: true, width: 150}
      ,{field: 'ipaddr', title: 'ip地址', width: 150}
      ,{field: 'status', title: '状态', width: 100}
      ,{field: 'scheduler', title: '调度', width: 100}
      ,{field: 'kebelet_version', title: 'kebelet版本', width: 150}
      ,{field: 'cri_version', title: 'cri版本', width: 150}
      ,{field: 'labels', title: '标签', templet: temp}
      ,{field: 'os_version', title: '操作系统', width: 200}
      ,{fixed: 'right', title:'操作', toolbar: '#bar', width:180}
    ]]
    ,id: 'TT'
    , done: function (res, curr,count) { //修改表头样式
            $('layui-table[lay-even]tr:nth-child(even)').css({ 'background-color': '#F0FFFF' });
            $('th').css({ 'background-color':'#F0FFFF', 'color': 'black', 'font-weight': '800', 'font-size': '14px', 'line-height':'10px' });
            }
});
function temp(d) {
    var labels = d.labels;
    var result = "";
    for (k in labels) {
        result += '<span style="border: #B0E0E6 solid 2px;border-radius: 5px">' + k + ": " + labels[k] + '</span><br>'
    }
    return result
}

//搜索框
layui.use('table', function () {
  $(document).on('click','#searchBtn', function () {
      var input_val = $('#nodeName').val();
      //console.log(input_val);
      table.reload('TT', {
          where: {   //设定异步数据接口的额外参数，任意设置 传{key: input_val}
              key: input_val
          },
          page: {
              curr: 1  //重新从第 1 页开始
          }
      });
      $('#nodeName').val(input_val); //将输入的内容回显的输入框中
  })
});

// 行工具事件
table.on('tool(tt)', function(obj){
    var data = obj.data; //obj.data获取当前行数据
    console.log(obj);
    if(obj.event === 'del'){
      layer.confirm('确认要删除吗', {icon: 3, title:'提示'}, function(index){
          layer.msg("node节点暂不支持删除")
          });
        layer.close(index); // 关闭layer层
      } else if(obj.event === 'yaml'){
        layer.msg("node节点暂不支持编辑")
      } else if(obj.event === 'details'){
        window.location.href="{% url "node_details" %}?node_name=" + data['name']
    }
});
});
</script>
{% endblock %}